<template>
  <div class="goods-list-item" @click="itemClick">
    <img class="img" v-lazy="showImage" alt @load="imageLoad" />
    <div class="goods-info">
      <p class="goods-title">{{ goodsItem.title }}</p>
      <span class="goods-price">{{ goodsItem.price }}</span>
      <span class="goods-collect">{{ goodsItem.cfav }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",

  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  computed: {
    showImage() {
      return this.goodsItem.image || this.goodsItem.show.img;
    },
  },

  methods: {
    // 图片是否加载完成
    imageLoad() {
      // console.log("[图片加载] >>> 已加载完成");
      // 发射一个事件总线的任务给首页监听处理 ps: 不止有首页使用 所以通过路由做一个区分
      const path = this.$route.path;
      if (path.indexOf("/home") != -1) {
        // 首页
        // console.log("[事件] 首页图片加载");
        this.$bus.$emit("homeItemImgLoad");
      } else if (path.indexOf("/detail") != -1) {
        // 详情
        // console.log("[事件] 详情图片加载");
        this.$bus.$emit("detailItemImgLoad");
      }
    },

    // 详情页点击跳转
    itemClick() {
      // console.log("[goods-list-item] >>> 跳转详情页");
      // 1. 使用动态路由 ps: 需要配置 router/index.js 中的path
      // this.$router.push(`/detail/${this.goodsItem.iid}`);

      // 2. 使用query传值
      this.$router.push({
        path: "/detail",
        query: {
          iid: this.goodsItem.iid,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.goods-list-item {
  // 为了让goods-info的div能够定位到底部 大概留了40像素的高度
  padding-bottom: 44px;
  position: relative;
  width: 48%;

  .img {
    width: 100%;
    border-radius: 5px;
  }

  .goods-info {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    overflow: hidden;

    .goods-title {
      // 设置单行显示、且使用...隐藏多余文字[text-overflow: ellipsis]
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .goods-price {
      color: var(--color-high-text);
      margin-right: 20px;
    }

    .goods-collect {
      position: relative;

      // 伪元素引入收藏icon >>> [在此不生效]
      &::before {
        content: "";
        position: absolute;
        left: -15px;
        top: -1px;
        width: 14px;
        height: 14px;
        // background: url("~assets/images/common/collect.svg") 0 0/14px 14px;
      }
    }
  }
}
</style>
<style>
.goods-collect::before {
  /* content: "";
  position: absolute;
  left: -15px;
  top: -1px;
  width: 14px;
  height: 14px; */
  background: url("~assets/images/common/collect.svg") 0 0/14px 14px;
}
</style>